<template>
    <div class="box">
        <van-search v-model="value" show-action label="地址" placeholder="请输入搜索关键词" @search="onSearch"
        @update:model-value="onUpdated">
            <template #left>
                <van-icon name="https://fastly.jsdelivr.net/npm/@vant/assets/icon-demo.png" @click="$router.go(-1)" />
                <!-- <van-icon name="cart-o" color="#1989fa" @click="$router.go(-1)"/> -->
            </template>
            <template #action>

                <van-icon name="cart-o" color="#1989fa" />
            </template>
        </van-search>
        <div class="content">
            <van-empty v-if="list.length==0"
                image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80"
                description="没找到相关商品" />
            <van-card v-else v-for="item in list" :key="item.id":price="item.price" :title="item.title"
                :thumb="item.image" @ckick="$router.push('/')"/>
            {{ list }}
        </div>
    </div>
</template>
<script setup>
import { ref ,onMounted, onUpdated} from 'vue';
import request from '@/utils/request'
import shake from '@/utils/shake'


const value = ref('');
const list = ref('');
const onSearch = () => {
    request.get('/search', {
        params: { value: value.value }
    }).then(res => {
        if (res.data.code == 200) {
            list.value = res.data.data
        }
    })
}
// const onClickButton = () => showToast(value.value);
onMounted(()=>{
    onSearch()
})
onUpdated=shake(()=>{
    onSearch()
},1000)
</script>